<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="ajile/com.iskitz.ajile.js?mvcoff,mvcshareoff,refresh"></script>
<script type="text/javascript" src="org.wattdepot.gdata.GDataLoader.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.kukuicup.Configuration.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.makahiki.Gauge.js"></script>
<script type="text/javascript" src="org.wattdepot.gdata.makahiki.Timestamp.js"></script>
 
<script type="text/javascript">
// Wrap this code in an anonymous self-invoking function to avoid polluting global namespace.
(function() {
  // Get the configuration instance with access to kukuicup data.
  var configuration = new org.wattdepot.gdata.kukuicup.Configuration();
  // A spreadsheet containing dorm power data.
  var spreadsheetURL = configuration.getCurrentPowerDataUrl();
  // How frequently we want this spreadsheet data to be refreshed in the visualization.
  var refreshInterval = 5; 
  // Load the visualization API and the spreadsheet data, then call displayDormData.
  var loader = new org.wattdepot.gdata.GDataLoader(displayDormData, spreadsheetURL, refreshInterval);  
      
  // Display three gauges
  function displayDormData(datatable) {
    drawGaugeInfo(datatable, configuration.getCurrentPowerDataRow(configuration.lehua), 'lehua');
    drawGaugeInfo(datatable, configuration.getCurrentPowerDataRow(configuration.mokihana), 'mokihana');
    drawGaugeInfo(datatable, configuration.getCurrentPowerDataRow(configuration.ilima),  'ilima');
    // set the background color.
    document.getElementById('chartdiv').style.backgroundColor = '#' + configuration.widgetBackgroundColor;
  }

  // Draw a gauge, title, and timestamp for the given dorm. 
  function drawGaugeInfo(data, row, dorm) {
    var columns = [0,2];
    var gauge = new org.wattdepot.gdata.makahiki.Gauge(configuration);
    gauge.draw(data, row, columns, dorm + '_chart_div', 5000);

    // Apply standard formatting to the timestamp, then display it.
    var tstampFormatter = new org.wattdepot.gdata.makahiki.Timestamp();
    tstampFormatter.format(data, 5, document.getElementById(dorm + '_time_div'));
    document.getElementById(dorm + '_time_div').innerHTML = data.getFormattedValue(row, 3);

    // Deal with rest of formatting.
    var textColor = configuration.widgetHeaderColor;
    document.getElementById(dorm + '_title_div').style.fontWeight = 'bold';
    document.getElementById(dorm + '_title_div').style.color = textColor;
    document.getElementById(dorm + '_time_div').style.color = textColor;
    document.getElementById(dorm + '_title_div').innerHTML = dorm;
    document.getElementById('chartdiv').style.textAlign = "center";
    document.getElementById('chartdiv').style.width = configuration.gaugeWidth;
  }
})();
</script>
</head>

<body>
<div id="chartdiv">
  <div id="lehua_chart_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  <div id="lehua_title_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  <div id="lehua_time_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>

  <div id="mokihana_chart_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  <div id="mokihana_title_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  <div id="mokihana_time_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>

  <div id="ilima_chart_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  <div id="ilima_title_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
  <div id="ilima_time_div"><img src="http://www.google.com/ig/images/spinner.gif"/></div>
</div>
</body>
</html>


